<template>
  <div id="loginBox">
      <TopBar style="margin-left:-.4rem">手机号注册</TopBar>
      <div id="loginContentBox"  style="margin-top:1.5rem">
        <LoginInput title="手机号"  @getValue="getPhone"></LoginInput>
        <LoginInput type="pwd" title="密码" @getValue="getPwd"></LoginInput>
        <LoginInputCode @getValue="getCode" :phone="phone" type="reg"></LoginInputCode>
        <LoginInput title="推荐人" @getValue="getName"></LoginInput>
        <div class="checkBox">
          <input type="checkbox" id="checkbox" v-model="isAgree"><span @click="toAgree" style="color:#327bf6">已阅读并同意《协议条款》</span>
        </div>
        <div id="loginBtn" @click="registBtn">完成注册</div>
      </div>
      <toast 
        v-model="showPositionValue" 
        type="text" 
        :time="2000" 
        is-show-mask 
        :text="msg" 
        position="middle"></toast>

  </div>
</template>
<script>
import TopBar from '../../component/common/TopBar'
import LoginInput from '../../component/common/LoginInput'
import LoginInputCode from '../../component/common/LoginInputCode'
import {verify,showMsg,getStore,setStore} from '../../../config/mUtils'
import { Toast} from 'vux'
import {register} from '../../../service/getData'
import { clearTimeout } from 'timers';
import {getSDK} from '../../../service/wxShare.js'

let time = null
export default {
  components:{
    TopBar,
    LoginInput,
    LoginInputCode,
    Toast,
  },
  beforeCreate(){
      getSDK()
    },
  data(){
    return {
      phone:'',
      pwd:'',
      code:'',
      name:'',
      msg:'',
      showPositionValue:false,
      isAgree:false
    }
  },
  methods:{
    toAgree(){
      this.$router.push('/agreement');
    },
    getPhone(data){
      this.phone = data;
    },
    getPwd(data){
      this.pwd = data;
    },
    getName(data){
      this.name = data;
    },
    getCode(data){
      this.code = data;
    },
    registBtn(){
      //console.log(`${this.phone}/${this.pwd}/${this.code}/${this.name}`)
      if(this.phone == ''){
        showMsg('请输入手机号',this)
      }else if(this.pwd == ''){
        showMsg('请输入密码',this)
      }else if(this.code == ''){
        showMsg('请输入短信验证码',this)
      }else if(!verify(this.phone,1)){
        showMsg("手机号格式错误",this)
      }else if(!verify(this.pwd,2)){
        showMsg("密码为6-16位非汉字字符",this)
      }else if(!verify(this.code,3)){
        showMsg("短信验证码错误",this)
      }else if(!this.isAgree){
        showMsg("请阅读并同意协议条款",this)
      }else{
        register(this.phone,this.pwd,this.code,this.name,this.name)
          .then(res=>{
            //console.log(res)
            if(res.status == 1){
              setStore('loginkey',res.info.loginkey);
              setStore('phone',res.info.loginname)
              time = setTimeout(()=>{
                this.$router.replace('/my')
              },2000)
            }
            showMsg(res.msg,this)
          })
      }
    }
  },
  beforeDestroy(){
    clearTimeout(time)
  }
}
</script>
<style lang="less">
@import '../../../style/mixin.less';

    #loginBox{
      width: 9.2rem;
      margin: 0 auto;
      background-color: #fff;
      #loginContentBox{
        margin-top:.2rem;
        padding-left: 0.4267rem;
        padding-right: 0.5333rem;
        #loginBtn{
          width: 100%;
          height: 1.2rem;
          background-color: #e44c2c;
          border-radius: 2rem;
          margin-top: 1.0667rem;
          color: #fff;
          text-align: center;
          line-height: 1.2rem;
          font-size: 0.5rem;
        }
      }
      .weui-toast,.weui-toast_text,.vux-toast-middle{
        width: 70% !important;
      }
      .checkBox{
        .fx(row,flex-start)
      }
    }
</style>
